<template>
    <div class="shop_cart">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="goods_list">
                <van-skeleton title :row="3" :loading="loading">
                    <van-checkbox-group v-if="goods_list.length>0" v-model="goods_num" ref="checkboxGroup" @change='changeGroup'>
                        <div class="modfiy">
                            <span @click="isModfiy = !isModfiy">{{isModfiy?'完成':'编辑'}}</span>
                        </div>
                        <div class="item" v-for="(item,index) in goods_list" :key="item.id">
                            <van-checkbox :name="item.id" ></van-checkbox>
                            <van-card :price="item.mPrice || item.price" :desc="item.name" :title="item.title" :thumb="item.url" @click="goodsClick(item.gid)">
                                <template #tags>
                                    <van-tag plain type="danger">自营商品</van-tag>
                                </template>
                                <template #footer>
                                    <div class="btn" @click.stop="">
                                        <div class="stepper" v-if="item.m_price">
                                            <div class="stepper" v-if="Array.isArray(JSON.parse(item.m_price))">
                                                <van-stepper v-model="item.num" :min="JSON.parse(item.m_price)[0].num" :max="item.stock" @change="AandR(index)" />
                                            </div>
                                            <div class="stepper" v-else>
                                                <van-stepper v-model="item.num" :min="1" :max="item.stock" @change="AandR(index)" />
                                            </div>
                                        </div>
                                        <div class="stepper" v-else>
                                            <van-stepper v-model="item.num" :min="1" :max="item.stock" @change="AandR(index)" />
                                        </div>
                                    </div>
                                </template>
                            </van-card>
                        </div>
                         
                    </van-checkbox-group>
                    <van-empty v-else image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="暂无商品">
                        <van-button round type="danger" class="bottom-button" @click="goBuy">去购买</van-button>
                    </van-empty> 
                </van-skeleton>
            </div>
        </van-pull-refresh>
        
        <div class="submit_bar" v-if="!isModfiy">
            <van-submit-bar :price="sum_goods_price*100" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="all_goods" @click="isBuyAll">全选</van-checkbox>
            </van-submit-bar>
        </div>
        <div class="submit_bar_del" v-if="isModfiy">
            <van-submit-bar button-text="删除" @submit="delAction">
                <van-checkbox v-model="all_goods" @click="isBuyAll">全选</van-checkbox>
            </van-submit-bar>
        </div>
        <van-tabbar route active-color="#ee0a24">
            <van-tabbar-item to="/" icon="shop-o">首页</van-tabbar-item>
            <van-tabbar-item to="/goodstypelist" icon="apps-o">全部分类</van-tabbar-item>
            <van-tabbar-item to="/shopcart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item to="/center" icon="manager-o">会员中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import _ from 'lodash'
import { mapState } from 'vuex'
export default {
    data(){
        return{
            isModfiy:false,//是否为编辑状态
            goods_num:[],
            all_goods:false,//是否全选
            isLoading: false,//是否开启下拉刷新
            loading:true,//骨架屏
            goods_list:[],//商品列表
            sum_goods_price:0,//价格汇总
        }
    },
    computed: {
        ...mapState(['openid']),
    },
    mounted(){
        this.getList()
        
    },
    methods:{
        //去购买
        goBuy(){
            this.$router.push('/')
        },
        //删除购物车商品
        async delAction(){
            console.log(this.goods_num.join())
            let form = {
                openid:this.openid,
                id:this.goods_num.join()
            }
            if (this.goods_num.length>0) {
                let {data:{code,data}} = await this.$http.post(this.$api.cartSingle,form)
                if (code === 0) {
                    this.$toast.success(data);
                    this.goods_num = []
                    this.all_goods = false
                    this.sum_goods_price = 0
                    this.getList()
                    
                }
            }else{
                this.$toast.fail('请选择要删除的商品');
            }
        },
        //点击商品
        goodsClick(e){
            console.log('点击商品')
            this.$router.push({ path: `/goodsdetail/${e}` })
        },
        //加减购物车商品数量
        AandR: _.debounce(function (index) {
            this._AandR(index)
        }, 500),
        async _AandR(index){
            this.sum_goods_price = 0
            
            let form={
                openid:this.openid,
                id:this.goods_list[index].id,
                num:this.goods_list[index].num
            }
            /* this.$toast.loading({ forbidClick: true }); */
            let {data:{code,data}} = await this.$http.post(this.$api.cartnum,form)
            if (code === 0) {
                this.goods_list.forEach(item=>{
                    if (item.m_price) {
                        if (JSON.parse(item.m_price) instanceof Array) {
                            JSON.parse(item.m_price).forEach((it,index)=>{
                                
                                if (item.num>=Number(it.num)) {
                                    item.mPrice = it.price
                                }else{
                                    
                                    if (index==0) {
                                        item.mPrice = it.price
                                    }
                                }
                            })
                        }
                    }
                    
                })
                this.goods_list.forEach(item=>{
                    this.goods_num.forEach(i=>{
                        if (item.id == i) {
                            console.log(item)
                            this.sum_goods_price = this.sum_goods_price+Number(item.mPrice || item.price)*Number(item.num)
                        }
                    })
                    
                })
            }else{
                setTimeout(()=>{
                    this.getList()
                },500)
            }
        },
        //全选
        isBuyAll(){
            if (this.all_goods) {
                this.goods_num = this.goods_list.map(item=>{
                    return item.id
                })
            }else{
                this.goods_num = []
            }
        },
        //选中商品发生变化时
        changeGroup(){
            console.log('this.goods_num----------',this.goods_num)
            this.sum_goods_price = 0
            this.goods_list.forEach(item=>{
                this.goods_num.forEach(i=>{
                    if (item.id == i) {
                        console.log(item)
                        this.sum_goods_price = this.sum_goods_price+Number(item.mPrice || item.price)*Number(item.num)
                    }
                })
                
            })
            if (this.goods_num.length === this.goods_list.length) {
                this.all_goods = true
            }else{
                this.all_goods = false
            }
        },
        //提交订单
        onSubmit(){
            
            if (this.goods_num.length>0) {
                let buyGoods = []
                this.goods_num.forEach(it=>{
                    this.goods_list.forEach(item=>{

                        if (item.id == it) {
                            buyGoods.push(item)
                        }
                    })
                })
                console.log('buyGoods---------',buyGoods)
                this.$store.commit('pushList',buyGoods)
                this.$router.push('/orderConfirm')
            } else {
                this.$toast.fail('请选择商品');
            }
            
        },
        //下拉刷新
        onRefresh() {
            this.getList()
            this.isLoading = false;
        },
        //获取购物车商品列表
        async getList(){
            let form = {
                openid: this.openid,
                size: 1000,
                current: 1
            }
            this.loading = true
            let{data:{code,data}} = await this.$http.get(this.$api.cartList,form)
            this.loading = false
            if (code === 0) {
                data.items.forEach(item=>{
                    if (item.m_price) {
                        if (JSON.parse(item.m_price) instanceof Array) {
                            JSON.parse(item.m_price).forEach((it,index)=>{
                                
                                if (item.num>=Number(it.num)) {
                                    item.mPrice = it.price
                                }else{
                                    
                                    if (index==0) {
                                        item.mPrice = it.price
                                    }
                                }
                            }) 
                        }else{
                            item.mPrice = item.m_pric
                        }
                    }
                    
                    
                })
                this.goods_list = data.items
                console.log(this.goods_list)
                if (this.goods_list.length<1) {
                    this.isModfiy = false
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .shop_cart{
        .goods_list{
            .modfiy{
                padding: 1rem;
                text-align: right;
            }
            .van-skeleton__content{
                margin-top: 2rem;
            }
            .van-skeleton__row, .van-skeleton__title{
                background-color: #fff;
            }
            min-height: calc(100vh - 100px);
            padding-bottom: 100px;
            box-sizing: border-box;
            .item{
                display: flex;
                background-color: #fafafa;
                padding: 0 1rem;
                margin-bottom: 1rem;
                .van-card{
                    width:calc(100% - 20px);
                }
                .btn{
                    text-align: right;
                }
            }
            .bottom-button{
                line-height: 30px;
                height: 30px;
            }
        }
        .van-submit-bar{
            bottom: 50px;
        }
        .submit_bar_del {
            .van-submit-bar__bar{
                justify-content: space-between;
            }
        }
    }
</style>